<template>
  <header
    class="relative mb-4 mt-4 sm:overflow-hidden sm:rounded-2xl sm:shadow-lg"
  >
    <div class="hidden sm:block">
      <span
        style="
          box-sizing: border-box;
          display: inline-block;
          overflow: hidden;
          width: initial;
          height: initial;
          background: none;
          opacity: 1;
          border: 0;
          margin: 0;
          padding: 0;
          position: relative;
          max-width: 100%;
        "
        ><span
          style="
            box-sizing: border-box;
            display: block;
            width: initial;
            height: initial;
            background: none;
            opacity: 1;
            border: 0;
            margin: 0;
            padding: 0;
            max-width: 100%;
          "
          ><img
            style="
              display: block;
              max-width: 100%;
              width: initial;
              height: initial;
              background: none;
              opacity: 1;
              border: 0;
              margin: 0;
              padding: 0;
            "
            alt=""
            aria-hidden="true"
            src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%271000%27%20height=%27400%27/%3e" /></span
        ><img
          alt="Sobhna's"
          src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2FGUwzsG1IUMb5uKmfEcL9v%2Fbdd82f1ddcdb95997a27324017cafd8c%2F310434030_1463503754160792_8080038083261304300_n.jpeg&amp;w=2048&amp;q=75"
          decoding="async"
          data-nimg="intrinsic"
          class="opacity-50"
          style="
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            box-sizing: border-box;
            padding: 0;
            border: none;
            margin: auto;
            display: block;
            width: 0;
            height: 0;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
            object-fit: cover;
          "
          srcset="
            https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2FGUwzsG1IUMb5uKmfEcL9v%2Fbdd82f1ddcdb95997a27324017cafd8c%2F310434030_1463503754160792_8080038083261304300_n.jpeg&amp;w=1080&amp;q=75 1x,
            https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2FGUwzsG1IUMb5uKmfEcL9v%2Fbdd82f1ddcdb95997a27324017cafd8c%2F310434030_1463503754160792_8080038083261304300_n.jpeg&amp;w=2048&amp;q=75 2x
          " /><noscript
          ><img
            alt="Sobhna&#x27;s"
            srcSet="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2FGUwzsG1IUMb5uKmfEcL9v%2Fbdd82f1ddcdb95997a27324017cafd8c%2F310434030_1463503754160792_8080038083261304300_n.jpeg&amp;w=1080&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2FGUwzsG1IUMb5uKmfEcL9v%2Fbdd82f1ddcdb95997a27324017cafd8c%2F310434030_1463503754160792_8080038083261304300_n.jpeg&amp;w=2048&amp;q=75 2x"
            src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2FGUwzsG1IUMb5uKmfEcL9v%2Fbdd82f1ddcdb95997a27324017cafd8c%2F310434030_1463503754160792_8080038083261304300_n.jpeg&amp;w=2048&amp;q=75"
            decoding="async"
            data-nimg="intrinsic"
            style="
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              box-sizing: border-box;
              padding: 0;
              border: none;
              margin: auto;
              display: block;
              width: 0;
              height: 0;
              min-width: 100%;
              max-width: 100%;
              min-height: 100%;
              max-height: 100%;
              object-fit: cover;
            "
            class="opacity-50"
            loading="lazy" /></noscript
      ></span>
    </div>
    <div class="flex sm:hidden flex-col items-center gap-5">
      <span
        style="
          box-sizing: border-box;
          display: inline-block;
          overflow: hidden;
          width: initial;
          height: initial;
          background: none;
          opacity: 1;
          border: 0;
          margin: 0;
          padding: 0;
          position: relative;
          max-width: 100%;
        "
        ><span
          style="
            box-sizing: border-box;
            display: block;
            width: initial;
            height: initial;
            background: none;
            opacity: 1;
            border: 0;
            margin: 0;
            padding: 0;
            max-width: 100%;
          "
          ><img
            style="
              display: block;
              max-width: 100%;
              width: initial;
              height: initial;
              background: none;
              opacity: 1;
              border: 0;
              margin: 0;
              padding: 0;
            "
            alt=""
            aria-hidden="true"
            src=""
          decoding="async"
          data-nimg="intrinsic"
          class="rounded-full"
          style="
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            box-sizing: border-box;
            padding: 0;
            border: none;
            margin: auto;
            display: block;
            width: 0;
            height: 0;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
            object-fit: cover;
          " /><noscript
          ><img
            alt="Sobhna&#x27;s"
            srcSet="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=384&amp;q=75 2x"
            src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=384&amp;q=75"
            decoding="async"
            data-nimg="intrinsic"
            style="
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              box-sizing: border-box;
              padding: 0;
              border: none;
              margin: auto;
              display: block;
              width: 0;
              height: 0;
              min-width: 100%;
              max-width: 100%;
              min-height: 100%;
              max-height: 100%;
              object-fit: cover;
            "
            class="rounded-full"
            loading="lazy" /></noscript
      ></span>
      <h2 class="text-4xl font-black leading-none text-cape-cod">Sobhna's</h2>
    </div>
    <div
      class="bg-white absolute left-0 right-0 bottom-0 flex-row gap-24 p-5 min-h-32 sm:flex hidden"
    >
      <div class="sm:absolute sm:left-10 sm:bottom-10 sm:block hidden">
        <span
          style="
            box-sizing: border-box;
            display: inline-block;
            overflow: hidden;
            width: initial;
            height: initial;
            background: none;
            opacity: 1;
            border: 0;
            margin: 0;
            padding: 0;
            position: relative;
            max-width: 100%;
          "
          ><span
            style="
              box-sizing: border-box;
              display: block;
              width: initial;
              height: initial;
              background: none;
              opacity: 1;
              border: 0;
              margin: 0;
              padding: 0;
              max-width: 100%;
            "
            ><img
              style="
                display: block;
                max-width: 100%;
                width: initial;
                height: initial;
                background: none;
                opacity: 1;
                border: 0;
                margin: 0;
                padding: 0;
              "
              alt=""
              aria-hidden="true"
              src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27150%27%20height=%27150%27/%3e" /></span
          ><img
            alt="Sobhna's"
            src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=384&amp;q=75"
            decoding="async"
            data-nimg="intrinsic"
            class="rounded-full"
            style="
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              box-sizing: border-box;
              padding: 0;
              border: none;
              margin: auto;
              display: block;
              width: 0;
              height: 0;
              min-width: 100%;
              max-width: 100%;
              min-height: 100%;
              max-height: 100%;
              object-fit: cover;
            "
            srcset="
              https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=256&amp;q=75 1x,
              https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=384&amp;q=75 2x
            " /><noscript
            ><img
              alt="Sobhna&#x27;s"
              srcSet="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=384&amp;q=75 2x"
              src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F5259x8zrma96%2F5gAnySFntcFJqTBQYxE8B8%2F99b8a83239247660669cb4ad9e60b597%2F398056260_673941231532298_7998768911488728638_n.jpeg&amp;w=384&amp;q=75"
              decoding="async"
              data-nimg="intrinsic"
              style="
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                box-sizing: border-box;
                padding: 0;
                border: none;
                margin: auto;
                display: block;
                width: 0;
                height: 0;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
                object-fit: cover;
              "
              class="rounded-full"
              loading="lazy" /></noscript
        ></span>
      </div>
      <div class="sm:ml-52 relative flex-1">
        <h1 class="text-5xl font-black leading-none text-cape-cod">Sobhna's</h1>
        <a
          target="_blank"
          class="underline text-sm text-gray-500 block"
          href="https://www.sobhnas.co.nz/"
          >sobhnas.co.nz</a
        >
      </div>
      <div class="hidden sm:flex flex-col">
        <h5 class="text-sm text-gray-500">
          Follow
          <!-- -->Sobhna's<!-- -->
          on social networks
        </h5>
        <div class="flex flex-col md:flex-row md:items-center gap-2 py-2">
          <button
            type="button"
            class="relative flex whitespace-nowrap gap-2 items-center justify-center text-xs py-1.5 px-3 leading-3 border rounded-3xl shadow-sm font-bold opacity-100 text-cape-cod bg-transparent cursor-pointer border-cadet-blue shadow-sm focus:outline-none"
          >
            <svg
              class="w-5 h-5 text-gray-700 hover:text-gray-800"
              width="16px"
              height="16px"
              viewBox="0 0 16 16"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g
                id="Symbols"
                stroke="none"
                stroke-width="1"
                fill="none"
                fill-rule="evenodd"
              >
                <g id="Icons/Facebook" fill="currentColor">
                  <path
                    d="M16,8 C16,3.5816 12.4184,-2.84217094e-14 8,-2.84217094e-14 C3.5816,-2.84217094e-14 0,3.5816 0,8 C0,11.9928 2.9256,15.3024 6.7504,15.9024 L6.7504,10.3128 L4.7184,10.3128 L4.7184,8 L6.7504,8 L6.7504,6.2376 C6.7504,4.2328 7.944,3.1256 9.772,3.1256 C10.6472,3.1256 11.5624,3.2816 11.5624,3.2816 L11.5624,5.2496 L10.5544,5.2496 C9.56,5.2496 9.2504,5.8664 9.2504,6.4992 L9.2504,8 L11.4688,8 L11.1144,10.312 L9.2504,10.312 L9.2504,15.9024 C13.0744,15.3024 16,11.9928 16,8 Z"
                    id="Path"
                  ></path>
                </g>
              </g></svg
            ><span>Facebook</span></button
          ><button
            type="button"
            class="relative flex whitespace-nowrap gap-2 items-center justify-center text-xs py-1.5 px-3 leading-3 border rounded-3xl shadow-sm font-bold opacity-100 text-cape-cod bg-transparent cursor-pointer border-cadet-blue shadow-sm focus:outline-none"
          >
            <svg
              class="w-5 h-5 text-gray-700 hover:text-gray-800"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 3333 3333"
              shape-rendering="geometricPrecision"
              text-rendering="geometricPrecision"
              fill="currentColor"
              image-rendering="optimizeQuality"
              fill-rule="evenodd"
              clip-rule="evenodd"
            >
              <path
                d="M1667 0c920 0 1667 746 1667 1667 0 920-746 1667-1667 1667C747 3334 0 2588 0 1667 0 747 746 0 1667 0zm-390 752h780c293 0 532 237 532 525v778c0 289-239 525-532 525h-780c-293 0-532-236-532-525v-778c0-289 240-525 532-525zm385 421c285 0 516 231 516 516s-231 516-516 516-516-231-516-516 231-516 516-516zm0 174c188 0 341 153 341 341s-153 341-341 341c-189 0-341-153-341-341s153-341 341-341zm499-246c46 0 84 37 84 84 0 46-37 84-84 84-46 0-84-37-84-84 0-46 37-84 84-84zm-820-200h652c245 0 445 199 445 443v656c0 244-200 443-445 443h-652c-245 0-445-199-445-443v-656c0-244 200-443 445-443z"
              ></path></svg
            ><span>Instagram</span>
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {};
</script>

<style></style>
